<template>
  <!-- 随访详情 -->
  <section>
    <div style="border-bottom: 1px solid #eee; padding-bottom: 10px">
      <el-page-header
        @back="goBack"
        :content="form.status == 3 ? '随访记录' : '开始随访'"
      ></el-page-header>
    </div>
    <el-alert
      v-if="visitDetail.remark"
      :title="visitDetail.remark"
      type="warning"
      :closable="false"
      style="margin-top: 10px"
      show-icon
    ></el-alert>
    <br />
    <div style="display: flex">
      <!-- <div style="flex-shrink: 0;margin-right:15px;">
        <patientBasicInfo v-if="visitDetail.patientId" :patientId="visitDetail.patientId"></patientBasicInfo>
      </div>-->

      <div style="flex-grow: 1">
        <h3 style="margin: 0">随访内容</h3>
        <hr />
        <table style="border: none; width: 100%">
          <tr style="height: 35px">
            <td>创建日期：{{ visitDetail.createTime }}</td>
            <td>创建人：{{ visitDetail.createName }}</td>
            <td>计划随访日期：{{ visitDetail.scheduleVisitTime }}</td>
            <td>计划执行人：{{ visitDetail.scheduleVisitUserName }}</td>
            <td>科室:{{ visitDetail.deptName }}</td>
            <td>主管医生：{{ visitDetail.doctorName }}</td>
          </tr>
          <tr style="height: 35px">
            <td colspan="6">随访类型：{{ visitDetail.visitType }}</td>
          </tr>
          <tr style="height: 35px">
            <td colspan="6">随访项目：{{ visitDetail.visitProject }}</td>
          </tr>
        </table>
        <hr />
        <div class="form-tool" style="align-items: center">
          <div>
            <table style="width: 100%; border: 0">
              <tr>
                <td width="120px;">
                  <h3 style="margin: 0">随访项目名称</h3>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <br />
        <el-form
          label-position="top"
          label-width="120px"
          :model="form"
          ref="visitForm"
          :rules="visitRules"
          @submit.native.prevent="onSubmit(0)"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="随访时间：" prop="visitTime">
                <el-date-picker
                  v-model="form.visitTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="请选择"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="随访人员：" prop="visitUserId">
                <userSearch
                  v-model="form.visitUserId"
                  :keyword="initSearch.visitUserName"
                  placeholder="请选择"
                ></userSearch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="随访方式：" prop="visitWay">
                <el-select v-model="form.visitWay" placeholder="请选择">
                  <el-option
                    v-for="(value, key) in visitWayEnum"
                    :key="key"
                    :value="key"
                    :label="value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button style="margin-top: 46px" @click="getOrder"
                >预约挂号</el-button
              >
            </el-col>
          </el-row>
          <el-form-item
            v-for="(items, itemIndex) in form.formItemList"
            :label="items.name"
            :key="itemIndex"
            :prop="'formItemList.' + itemIndex + '.values'"
            :rules="
              items.required
                ? items.component == 'checkbox'
                  ? {
                      type: 'array',
                      required: true,
                      message: '请至少选择一个' + items.name,
                      trigger: 'change',
                    }
                  : {
                      required: true,
                      message: items.name + '不能为空',
                      trigger: ['blur', 'change'],
                    }
                : null
            "
          >
            <el-radio-group
              v-if="items.component == 'radio'"
              v-model="items.values"
            >
              <el-radio
                v-for="(obj, index) in items.optionList"
                :value="obj.value"
                :label="obj.value"
                :key="index"
              ></el-radio>
            </el-radio-group>
            <el-checkbox-group
              v-if="items.component == 'checkbox'"
              v-model="items.values"
            >
              <el-checkbox
                v-for="(obj, ins) in items.optionList"
                :label="obj.value"
                :key="ins"
              ></el-checkbox>
            </el-checkbox-group>
            <el-select
              v-if="items.component == 'select'"
              v-model="items.values"
            >
              <el-option
                v-for="(obj, nums) in items.optionList"
                :value="obj.value"
                :label="obj.value"
                :key="nums"
              ></el-option>
            </el-select>
            <el-input
              v-if="items.component == 'text'"
              v-model="items.values"
            ></el-input>
            <el-input
              v-if="items.component == 'textarea'"
              type="textarea"
              v-model="items.values"
            ></el-input>
          </el-form-item>
          <el-button
            v-show="false"
            :loading="btnLoading"
            native-type="submit"
          ></el-button>
        </el-form>
        <div
          style="
            padding-top: 15px;
            margin-top: 15px;
            border-top: 1px solid #ccc;
          "
        >
          <el-button :loading="btnLoading" type="danger" @click="onSubmit(2)"
            >结案并保存</el-button
          >
          <el-button :loading="btnLoading" type="primary" @click="onSubmit(1)"
            >保存</el-button
          >
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import enumArr from "./_enum/enum";
export default {
  components: {
    patientBasicInfo: () => import("@/pages/_com/patientBasicInfo.vue"),
    userSearch: () => import("@/pages/_com/userSearch.vue"),
    largeUpFile: () => import("@/components/largeUpFile.vue"),
  },
  data() {
    return {
      btnLoading: false,
      initSearch: {
        visitUserName: "",
      },
      qxBtns: {},
      //随访任务详情
      visitDetail: {
        //创建人
        createName: "",
        //创建时间
        createTime: "",
        //科室名称
        deptName: "",
        //医生
        doctorName: "",
        recordId: "",
        //随访时间
        scheduleVisitTime: "",
        //随访项目
        visitProject: "",
        //随访类型
        visitType: "",
        //计划随访人员
        scheduleVisitUserName: "",
        //患者名称
        patientName: "",
        //患者ID
        patientId: "",
        remark: "",
      },
      visitTypeItem: [], //随访类型下的项目
      visitWayEnum: enumArr.VISITWAY, //随访方式
      visitItemEnum: [], //随访分类枚举
      resultList: [], //查看随访结果
      form: {
        id: "", //结论id
        recordId: "", //随访id
        visitTime: "", //随访时间
        visitUserId: "", //随访人员
        visitWay: "", //随访方式(1电话随访 2微信随访)枚举
        result: "", //随访结果
        status: "", //是否结案(1保存 2保存并结案)
        formItemList: [],
      },
      visitRules: {
        visitTime: [
          { required: true, message: "请选择随访时间", trigger: "change" },
        ],
        visitUserId: [
          { required: true, message: "请选择随访人员", trigger: "change" },
        ],
        visitWay: [
          { required: true, message: "请选择随访方式", trigger: "change" },
        ],
        result: [
          { required: true, message: "请选择随访结论", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.form.recordId = this.jieMi(this.$route.query.id);
  },
  async mounted() {
    this.getVisitDetail();
  },
  methods: {
    onSubmit(status) {
      const {
        recordId,
        visitTime,
        visitUserId,
        visitWay,
        result,
        id,
        formItemList,
      } = this.form;
      const list = this.form.formItemList;
      let newList = [];
      list.forEach((it) => {
        const {
          component,
          value,
          name,
          values,
          optionList,
          required,
          sort,
          extra,
        } = it;
        newList.push({
          component,
          value: component == "checkbox" ? values.join(",") : values,
          name,
          optionList,
          required,
          sort,
          extra,
        });
      });
      let json = {
        recordId,
        visitTime,
        visitUserId,
        visitWay,
        result,
        status: status,
        id,
        result: JSON.stringify(newList),
      };
      this.$refs["visitForm"].validate((valid) => {
        if (valid) {
          this.$api.addOrUpdateVisitResult(json).then((res) => {
            if (res.executed) {
              this.$message.success(res.message);
              this.goBack();
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    //获取随访详情
    async getVisitDetail() {
      const { recordId } = this.form;
      if (recordId)
        await this.$api.getVisitResult({ recordId: recordId }).then((res) => {
          if (res.executed) {
            let d = res.dataBody;
            const {
              createName,
              createTime,
              deptName,
              recordId,
              doctorName,
              scheduleVisitTime,
              visitProject,
              visitType,
              result,
              visitWay,
              visitUserId,
              visitTime,
              scheduleVisitUserName,
              id,
              patientId,
              patientName,
              remark,
              visitUserName
            } = d;
            this.initSearch.visitUserName=visitUserName;
            this.visitDetail = {
              //创建人
              createName: createName,
              //创建时间
              createTime: createTime,
              //科室名称
              deptName: deptName,
              //医生
              doctorName: doctorName,
              recordId: recordId,
              //随访时间
              scheduleVisitTime: scheduleVisitTime,
              //随访项目
              visitProject: visitProject,
              //随访类型
              visitType: visitType,
              scheduleVisitUserName,
              patientName,
              patientId,
              remark,
              visitUserName
            };
            let items = [];
            if (result) {
              items = JSON.parse(result);
              items.forEach((obj) => {
                obj.values = obj.value;
                if (obj.component == "checkbox") {
                  if (obj.value != "") {
                    obj.values = obj.value.split(",");
                  } else {
                    obj.values = new Array();
                  }
                }
                return obj;
              });
            }
            this.form = {
              formItemList: items,
              visitUserId,
              recordId,
              visitWay: visitWay ? visitWay.toString() : "",
              visitTime,
              id,
            };
          }
        });
    },
    goBack() {
      const th = this;
      th.$router.push({
        path: "visit",
      });
    },
    getOrder() {
      let j = {};
      j = {
        patientId: this.jiaMi(this.visitDetail.patientId),
        name: this.visitDetail.patientName,
      };

      let url = "/page/reservecentre";
      let bool = this.verifyUrl(url);
      if (bool == false) {
        this.$message.error("权限不足");
        return false;
      } else {
        this.delCache("reservecentre");
        this.addNavMenu("预约", url, "reservecentre");
        this.$router.push({
          path: url,
          query: this.getUrlToken(j),
        });
      }
    },
  },
};
</script>